KeyPressed Question

mariamalz

I need some help coding a part of this sketch. I would like help in finding code that will allow me to create longer boxes the more I hold down the keys.

---

int maxHeight = 50;
int minHeight = 50;
int letterHeight = maxHeight; // Height of the letters
int letterWidth = 50;          // Width of the letter

int x = -letterWidth;          // X position of the letters
int y = 0;                      // Y position of the letters

boolean newletter;              

int numChars = 26;      // There are 26 characters in the alphabet
color[] colors = new color[numChars];

void setup() {
  size(1440, 855); //640, 320
  noStroke();
  colorMode(HSB, numChars);
  background(numChars/2);
  // Set a hue value for each key
  for(int i = 0; i < numChars; i++) {
    colors[i] = color(i, numChars, numChars);    
  }
}

void draw() {
  if(newletter == true) {
    // Draw the "letter"
    int y_pos;
    if (letterHeight == maxHeight) {
      y_pos = y;
      rect( x, y_pos, letterWidth, letterHeight );
    } else {
      y_pos = y + minHeight;
      rect( x, y_pos, letterWidth, letterHeight );
      fill(numChars/2);
      rect( x, y_pos-minHeight, letterWidth, letterHeight );
    }
    newletter = false;
  }
}

void keyPressed()
{
  // If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122)
  if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
    int keyIndex;
    if(key <= 'Z') {
      keyIndex = key-'A';
      letterHeight = maxHeight;
      fill(colors[keyIndex]);
    } else {
      keyIndex = key-'a';
      letterHeight = minHeight;
      fill(colors[keyIndex]);
    }
  } else {
    fill(0);
    letterHeight = 10;
  }

  newletter = true;

  // Update the "letter" position
  x = ( x + letterWidth ); 

  // Wrap horizontally
  if (x > width - letterWidth) {
    x = 0;
    y+= maxHeight;
  }

  // Wrap vertically
  if( y > height - letterHeight) {
    y = 0;      // reset y to 0
  }
}

TfGuy44

MY EYES! @-)

https://forum.processing.org/two/discussion/15473/how-to-format-code-and-text#latest

jeremydouglass

create longer boxes the more I hold down the keys

Could you explain more what you mean by this?

mariamalz

Could you explain more what you mean by this?

@jeremydouglass Sure! For example, the longer I hold down the A key, the more the square would expand in the x-axis. This is what I basically want to achieve.

jeremydouglass

Okay. How does this relate to the code you have in keyPressed -- it looks like typing code.

After you release a held-down key A, should pressing A again:

1. make the same box get longer, or should it
2. draw a new box one character to the right?

Chrisir

Yeah you could measure the time key is down using millis().

Or use frameCount and measure the difference between frameCount now and frameCount the time (some seconds ago) key was pressed

Either way you take the difference

Then you can use map() to map this difference from the range it has mostly to the range you want (0 to width)

See reference map ()

Easiest way would be to use a variable rectwidth on your rectangle rect() and as long key is down, say rectwidth++;

Define rectwidth before setup as int rectwidth;

Best, Chrisir ;-)

mariamalz

Thank you for your replies!

@jeremydouglass Pressing A again should create another box one character to the right!

@Chrisir Do you think the best way would to be using rectwidth? Because I want the key to act as a trigger to keep growing until it is released.

Chrisir

yes, use rectwidth

show your entire code when you're done

hint: you need setup() and draw()

;-)

mariamalz

int rectWidth=0;
int rectHeight=250;

void setup(){
  size(800,800);
  background(50);
  noStroke();
  smooth();

}

void draw(){

 rect(0, 0, 0, rectHeight);

 if(keyPressed){
   rect(0, 0, rectWidth++, rectHeight);
 } 

@Chrisir I figured out this part so far; I can get one colored bar to expand as I hold down the key. I have another issue now, how could I get another colored bar to continue where the other one left off? Thanks!

Chrisir

Your code is not fully correct

Line 17 should be just rectWidth++; without the rect.....

Like 14 should have rectWidth instead of the 3rd 0 but without the ++ part obviously.

Especially when you use background (50); at the start of draw ()

Please post your entire code on this.

To the next issue:

Hm. You mean only 2 or maybe 10 or more rectangles? Are you familiar with arrays?

What’s the position of the upper left corner for the 2nd rectangle?

kfrajer

Demo below.

Kf

float rectWidth;
float rectHeight;

void setup() {
  size(800, 800);
  background(50);
  frameRate(60);
  noStroke();
  smooth();
  fill(255);

  rectWidth=width*0.25;
  rectHeight=height*0.5;
}


void draw() {
  background(50);

  if (keyPressed && (key=='w' || key=='W'))
      rectWidth=constrain(rectWidth+1, 0, width);    
  else {
    rectWidth=constrain(rectWidth-1, 0, width);

  }

  rect(0,0,rectWidth,rectHeight);

}

mariamalz

@Chrisir I made changes to the codes based on your comments.

Hm. You mean only 2 or maybe 10 or more rectangles? Are you familiar with arrays?

Here's my updated code:

int rectWidth=0;
int rectHeight=250;

int x = -rectWidth;  

void setup(){
  size(800,800);
  background(0);
  noStroke();
  smooth();

}

void draw(){

 rect(0, 0, rectWidth, rectHeight);

 if(keyPressed){
   rectWidth++;


  if((key == 'a')) {
   fill(#8fcd9c); }

 if((key == 'b')) {
    fill(#96c6ea); }

 if((key == 'c')) {
    fill(#ef3942); }

 if((key == 'd')) {
    fill(#fdf04d); }

 if((key == 'e')) {
    fill(#c6e9f6); }

 if((key == 'f')) {
    fill(#ef5a7a); }

 if((key == 'g')) {
    fill(#f8971d); } 
 } 

Ideally I would want the person to be able to 4-5 rectangles in the sketch whose size I've updated too. I've assigned colors to specific keys, so essentially you could type a, b, c, and d and get the corresponding colors as well. I am not familiar with arrays, though. Would that suit what I am trying to do?

What’s the position of the upper left corner for the 2nd rectangle?

Essentially it continues right after the 1st rectangle depending on where it stops. Here's a picture of what I want to achieve but with rectWidth++.

Thanks!

Chrisir

My question:

What’s the position of the upper left corner for the 2nd rectangle?

was a question for you to solve. How would you calculate it in real life?? If you had top explain it to a friend?

I was assuming you draw the first bar no matter what key. You release the key. You press the same or another key, either way the sketch starts a new bar since it’s a new pressing event.

The new bar just starts at the old.

Your approach uses different keys which is as good a approach as mine.

Chrisir

Chrisir

Let’s say you got maximum 6 rectangles of different widths.

You need to store the width of each separately.

jeremydouglass

Continued here (not sure why):

https://forum.processing.org/two/discussion/27750/how-to-store-previous-keypressed-data-in-the-same-sketch#latest

... so close this thread?